<template>
	<view class="activityMoveAccounts" :style="[{paddingTop:statusBar+ 'px'}]">
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:(statusBar-2)+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">转出</view>
		</view>
		<view class="navigation-position"></view>
		<view class="activity-move-accounts-content">
			<view class="invite-code-box">
				<view>邀请码</view>
				<input type="text" class="phone-ipt" value=""  v-model="invite_code" placeholder="请输入对方邀请码" placeholder-style="color:#C0C0C0;font-size:28rpx;" @blur="blurFun()"  />	
				<view class="paste-box" v-if="statusBar>0&&isAndroid" @click="paste()">粘贴</view>
				<view class="my-friend-box" @click="goMyFriend()">
					我的伙伴
				</view>
			</view>
		</view>
		<view class="withdrawal-amount">
			<view class="withdrawal-amount-title">转出数量</view>
			<view class="withdrawal-amount-ipt-box">
				<!-- <view>￥</view>	 -->
				<input type="text" value=""  :placeholder="'可用数量' + user.gold_beans + '个，20个起转'"  v-model="transfer_amount" placeholder-style="color:#CCCCCC;font-size:26rpx;font-weight:400;" :disabled="disable"/>
				
				<image src="/static/images/cancle.png" class="clear-input" @click="clearMoneyNum()" mode="" v-if="!disable"></image>
			</view>
			<view class="withdrawal-amount-all" @click="allMoneyNum()" v-if="!disable">全部</view>
		</view>
		<view class="move-money-btn" @click="moveMoney()" v-if="!disable">确认转出</view>
		<view class="move-money-btn" @click="supportGoldBeans()" v-else >扶持</view>
		<uni-popup ref="passwordPopup" type="center" :mask-click="false">
			<view class="password-confirm-modal">
				<view class="password-confirm-tips">请输入交易密码</view>
				<view class="password-confirm-ipt-box">
					<input type="password" class="password-confirm-ipt" value="" v-model="password" placeholder="请输入交易密码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />
				</view>	
				<view class="password-confirm-bottom">
					<view @click="closePop()" >取消</view>
					<view @click="confirm()" >确定</view>	
				</view>	
			</view>
		</uni-popup>
		<uni-popup ref="passwordSupportPopup" type="center" :mask-click="false">
			<view class="password-confirm-modal">
				<view class="password-confirm-tips">请输入交易密码</view>
				<view class="password-confirm-ipt-box">
					<input type="password" class="password-confirm-ipt" value="" v-model="password" placeholder="请输入交易密码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />
				</view>	
				<view class="password-confirm-bottom">
					<view @click="closePasswordSupportPopup()" >取消</view>
					<view @click="confirmSupportGoldBeans()" >确定</view>	
				</view>	
			</view>
		</uni-popup>
		<uni-popup ref="userConfirmSupportPopup" type="center" :mask-click="false">
			<view class="user-confirm-modal">
				<view class="user-confirm-tips">提示</view>
				<image :src="transfer_user_img" class="transfer-user-img" mode=""></image>
				<view class="user-confirm-content-text" v-if="disable">您确认向 <text class="transfer_user_name">{{ transfer_user_name }}</text> 扶持金豆 <text class="transfer_amount">100</text> 个<text class="transfer_amount">+</text>余额<text class="transfer_amount">100</text>元，+1000元抢购金？</view>
				<view class="user-confirm-content-text1">*扶持由平台替您转出</view>
				<view class="password-confirm-bottom">
					<view @click="closeUserConfirmSupportPop()" >取消</view>
					<view @click="userSupportConfirm()" >确定</view>	
				</view>	
			</view>
		</uni-popup>
		<uni-popup ref="userConfirmPopup" type="center" :mask-click="false">
			<view class="user-confirm-modal">
				<view class="user-confirm-tips">提示</view>
				<image :src="transfer_user_img" class="transfer-user-img" mode=""></image>
				<view class="user-confirm-content-text">您确认向 <text class="transfer_user_name">{{ transfer_user_name }}</text> 转出金豆 <text class="transfer_amount">{{ transfer_amount }}</text> 个？</view>
				<view class="password-confirm-bottom">
					<view @click="closeUserConfirmPop()" >取消</view>
					<view @click="userConfirm()" >确定</view>	
				</view>	
			</view>
		</uni-popup>
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar =  params['status_bar'];
	let source = 'wap'
	if(token!=undefined){
		uni.setStorage({
		    key: 'token',
		    data: token
		})
		source = 'app'
	}
	if(status_bar!=undefined){
		uni.setStorage({
		    key: 'status_bar',
		    data: status_bar
		})
	} */
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	import { transferGoldBeans,supportGoldBeans,stormSupport } from "api/goldstormApi.js"
	import { getUser,userFromInviteCode } from "api/userApi"
	export default {
		store,
		computed:{
			...mapGetters([
				'user',
				'statusBar'
			])
		},
		mixins: [
			
		],
		data:()=>({
			source:source,
			invite_code:null,
			transfer_amount:null,
			password:null,
			transfer_user_img:null,
			transfer_user_name:null,
			isClick:true,
			disable:false,
			isAndroid:null
		}),
		methods:{
			...mapMutations([
				'setUser',
				'setStatusBar'
			]),
			back(){
				if(this.source == 'wap'){
					uni.navigateBack()
				}else{
					backToApp.postMessage('back');
				}
			},
			goMyFriend(){
				uni.navigateTo({
					url:'/packs/pages/myFriend/myFriend?isBean=true&from=other'
				})
			},
			clearMoneyNum(){
				this.transfer_amount = null
			},
			allMoneyNum(){
				this.transfer_amount = this.user.gold_beans;
			},
			goldBeansSupport(code){
				this.transfer_amount = '100金豆+100元余额+1000元抢购金';
				
				this.invite_code = code;
				this.disable = true
			},
			closePop(){
				this.$refs.passwordPopup.close()
				this.password = null
			},
			closePasswordSupportPopup(){
				this.$refs.passwordSupportPopup.close()
				this.password = null
			},
			closeUserConfirmPop(){
				this.$refs.userConfirmPopup.close()
			},
			closeUserConfirmSupportPop(){
				this.$refs.userConfirmSupportPopup.close()
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async moveMoney(){
				let _this = this;
				if(!this.invite_code){
					uni.showToast({
						icon:"none",
						title:'请输入对方邀请码'
					})
				}else if(!this.transfer_amount){
					uni.showToast({
						icon:"none",
						title:'请输入转出数量'
					})
				}else{					
					let data = {
						invite_code:this.invite_code
					}
					const res = await userFromInviteCode(data)
					if(!res.message){
						this.transfer_user_img = res.avatar_url;
						this.transfer_user_name = res.name;
					}
					this.$refs.userConfirmPopup.open('center')
					
				}
			},
			async supportGoldBeans(){
				let _this = this;
				if(!this.invite_code){
					uni.showToast({
						icon:"none",
						title:'请输入对方邀请码'
					})
				}else if(!this.transfer_amount){
					uni.showToast({
						icon:"none",
						title:'请输入转出数量'
					})
				}else{					
					let data = {
						invite_code:this.invite_code
					}
					const res = await userFromInviteCode(data)
					if(!res.message){
						this.transfer_user_img = res.avatar_url;
						this.transfer_user_name = res.name;
					}
					this.$refs.userConfirmSupportPopup.open('center')
				}
			},
			async userSupportConfirm(){
				this.closeUserConfirmSupportPop()
				let parms = {
					invite_code:this.invite_code
				}
				const response =  await stormSupport(parms)
				if(!response.message){
					this.$refs.passwordSupportPopup.open('center')
				}else{
					if(Object.values(response.errors)[0][0]=='请输入交易密码'){
						this.$refs.passwordSupportPopup.open('center')
					}else if(Object.values(response.errors)[0][0]=='请先绑定支付宝账号'){
								let _this = this
								uni.showModal({
									content:'您还未绑定支付宝账号，请使用App绑定支付宝后可转金豆！',
									confirmText:'去绑定',
									success: function (res) {
										if (res.confirm) {
											if(_this.statusBar>0){
												// window.flutter_inappwebview.callHandler('bind_alipay_app')
												bindAlipayApp.postMessage('bindali');
											}else{
												uni.navigateTo({url: '/packs/pages/download/download?from=1'})
											}
										}
									}
								})
				}else if(Object.values(response.errors)[0][0]=='请先设置交易密码'){
							if(this.statusBar>0){
								setPayCodeByApp.postMessage('paycodeset');
							}else{
								uni.navigateTo({url: '/packs/pages/userset/setpaycode'})
							}
						}else{
						uni.showModal({
							title:'提示',
							content:Object.values(response.errors)[0][0],
							confirmText:'知道了',
							confirmColor:'#FF6011',
							showCancel:false
						})
					}
				}
			},
			async userConfirm(){
				this.closeUserConfirmPop()
				let parms = {
					invite_code:this.invite_code,
					amount:this.transfer_amount
				}
				const response =  await transferGoldBeans(parms)
				if(!response.message){
					this.$refs.passwordPopup.open('center')
				}else{
					if(Object.values(response.errors)[0][0]=='请输入交易密码'){
						this.$refs.passwordPopup.open('center')
					}else if(Object.values(response.errors)[0][0]=='请先绑定支付宝账号'){
								let _this = this
								uni.showModal({
									content:'您还未绑定支付宝账号，请使用App绑定支付宝后可转金豆！',
									confirmText:'去绑定',
									success: function (res) {
										if (res.confirm) {
											if(_this.statusBar>0){
												// window.flutter_inappwebview.callHandler('bind_alipay_app')
												bindAlipayApp.postMessage('bindali');
											}else{
												uni.navigateTo({url: '/packs/pages/download/download?from=1'})
											}
										}
									}
								})
				}else if(Object.values(response.errors)[0][0]=='请先设置交易密码'){
							if(this.statusBar>0){
								setPayCodeByApp.postMessage('paycodeset');
							}else{
								uni.navigateTo({url: '/packs/pages/userset/setpaycode'})
							}
						}else{
						uni.showModal({
							title:'提示',
							content:Object.values(response.errors)[0][0],
							confirmText:'知道了',
							confirmColor:'#FF6011',
							showCancel:false
						})
					}
				}
			},
			async confirmSupportGoldBeans(){
				if(this.password){
					if(this.isClick){
						this.isClick = false;
						let parms = {
							invite_code:this.invite_code,
							pay_code:this.password
						}
						this.closePasswordSupportPopup()
						const response =  await stormSupport(parms)
						this.password = null;
						this.isClick = true;
						if(!response.message){
							uni.showModal({
								title:'提示',
								content:'扶持成功！',
								confirmText:'知道了',
								confirmColor:'#FF6011',
								showCancel:false,
								success: function (res) {
									if (res.confirm) {
										var pages= getCurrentPages()
										var prevPage = pages[pages.length-2]
										prevPage.$vm.refresh()
									}
								}
							})
							this.transfer_amount = null
							this.disable = false
						}else{
							if(Object.values(response.errors)[0][0]=='请先绑定支付宝账号'){
								let _this = this
								uni.showModal({
									content:'您还未绑定支付宝账号，请使用App绑定支付宝后可转金豆！',
									confirmText:'去绑定',
									success: function (res) {
										if (res.confirm) {
											if(_this.statusBar>0){
												// window.flutter_inappwebview.callHandler('bind_alipay_app')
												bindAlipayApp.postMessage('bindali');
											}else{
												uni.navigateTo({url: '/packs/pages/download/download?from=1'})
											}
										}
									}
								})
							}else if(Object.values(response.errors)[0][0]=='请先设置交易密码'){
							if(this.statusBar>0){
								setPayCodeByApp.postMessage('paycodeset');
							}else{
								uni.navigateTo({url: '/packs/pages/userset/setpaycode'})
							}
						}else{
								uni.showModal({
									title:'提示',
									content:Object.values(response.errors)[0][0],
									confirmText:'知道了',
									confirmColor:'#FF6011',
									showCancel:false
								})
							}
						}
						// this.transfer_amount = null
					}
					await this.getUser()
				}else{
					uni.showModal({
						title:'提示',
						content:'请输入交易密码！',
						confirmText:'知道了',
						confirmColor:'#FF6011',
						showCancel:false
					})
				}
			},
			async confirm(){
				if(this.password){
					if(this.isClick){
						this.isClick = false;
						let parms = {
							invite_code:this.invite_code,
							amount:this.transfer_amount,
							pay_code:this.password
						}
						this.closePop()
						const response =  await transferGoldBeans(parms)
						this.password = null;
						this.isClick = true;
						if(!response.message){
							uni.showModal({
								title:'提示',
								content:'金豆转出成功！',
								confirmText:'知道了',
								confirmColor:'#FF6011',
								showCancel:false,
								success: function (res) {
									if (res.confirm) {
										var pages= getCurrentPages()
										var prevPage = pages[pages.length-2]
										prevPage.$vm.refresh()
									}
								}
							})
							this.transfer_amount = null
						}else{
							if(Object.values(response.errors)[0][0]=='请先绑定支付宝账号'){
								let _this = this
								uni.showModal({
									content:'您还未绑定支付宝账号，请使用App绑定支付宝后可转金豆！',
									confirmText:'去绑定',
									success: function (res) {
										if (res.confirm) {
											if(_this.statusBar>0){
												bindAlipayApp.postMessage('bindali');
											}else{
												uni.navigateTo({url: '/packs/pages/download/download?from=1'})
											}
										}
									}
								})
							}else if(Object.values(response.errors)[0][0]=='请先设置交易密码'){
							if(this.statusBar>0){
								setPayCodeByApp.postMessage('paycodeset');
							}else{
								uni.navigateTo({url: '/packs/pages/userset/setpaycode'})
							}
						}else{
								uni.showModal({
									title:'提示',
									content:Object.values(response.errors)[0][0],
									confirmText:'知道了',
									confirmColor:'#FF6011',
									showCancel:false
								})
							}
						}
						this.transfer_amount = null
					}
					await this.getUser()
				}else{
					uni.showModal({
						title:'提示',
						content:'请输入交易密码！',
						confirmText:'知道了',
						confirmColor:'#FF6011',
						showCancel:false
					})
				}
			},
			testMultiple(amount){
				if(amount%20==0){ return true }else{ return false }
			},
			backEvent(code){
				this.invite_code = code
				this.disable = false
				this.transfer_amount = null
			},
			paste(){
				getClipBoardCotentByApp.postMessage('clipBoardCotent');
			},
			pasteByapp(msg){
				if(this.statusBar>0){
					if(msg){
						this.invite_code = msg
					}
				}
			},
			judgePlatForm(){
			    let platform=uni.getSystemInfoSync().platform
			    if(platform=='android'){
			      this.isAndroid = true
			    }
			}
		},
		async onShow(){
			if(status_bar!=undefined){
				this.setStatusBar(status_bar)
			}
			if(await this.isLogin ||  await this.statusBar>0){
				await this.getUser()
			}
			
			this.judgePlatForm()
			
		},
		onLoad(options) {
			if(options.code){
				this.invite_code = options.code
			}
		},
		onReady() {
			window.pasteByApp = this.pasteByApp
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #F6F6F6;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.my-friend-box{
		width:180rpx;
		height:48rpx;
		position: absolute;
		display: flex;
		align-items: center;
		top: 30rpx;
		right:15rpx;
		font-size: 28rpx;
		color: #333333;
		>image{
			display: block;
			width:40rpx;
			height: 40rpx;
			margin-right: 6rpx;
		}
	}
	
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.invite-code-box{
		width: 690rpx;
		height: 106rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin:20rpx auto 16rpx;
		display: flex;
		align-items: center;
		position: relative;
		>view{
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-left: 32rpx;
		}
		.my-friend-box{
			width:140rpx;
			height:48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			background:rgba(24, 119, 255, 0.1);
			border-radius: 24rpx;
			font-weight: 500;
			color: #1861F2;
			position: absolute;
			top:29rpx;
			right:32rpx;
			>image{
				display: block;
				width:38rpx;
				height: 38rpx;
				margin-right: 6rpx;
			}
		}
		.paste-box{
			width: 104rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background:rgba(24, 119, 255, 0.1);
			border-radius: 24rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #1861F2;
			position: absolute;
			top: 30rpx;
			right:190rpx;
		}
	}
	.phone-ipt{
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #555555;
		// width:420rpx;
		width:250rpx;
	}
	.phone-ipt-code{
		width:300rpx;
	}
	.withdrawal-amount{
		width: 690rpx;
		height: 196rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 24rpx auto 0;
		position: relative;
	}
	.withdrawal-amount-title{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;
		margin-left: 32rpx;
		padding-top: 32rpx;
	}
	.withdrawal-amount-ipt-box{
		display: flex;
		align-items: center;
		margin-top: 44rpx;
		>view:nth-child(1){
			font-size: 40rpx;
			font-weight: bold;
			color: #272727;
			line-height: 48rpx;
			margin:0 16rpx 0 32rpx;
		}
		>input{
			width: 480rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
			margin: 0 10rpx 0 32rpx;
		}
		.clear-input{
			display: block;
			width: 32rpx;
			height: 32rpx;
		}
	}
	.withdrawal-amount-all{
		width: 104rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background:rgba(24, 119, 255, 0.1);
		border-radius: 24rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #1861F2;
		position: absolute;
		top:105rpx;
		right:32rpx;
	}
	.move-money-btn{
		width: 560rpx;
		height: 84rpx;
		background: #FF9500;
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin: 160rpx auto;
		letter-spacing: 2rpx;
	}
	.password-confirm-modal{
		width: 620rpx;
		height: 300rpx;
		padding:20rpx 0 64rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.password-confirm-tips{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
		text-align: center;
	}
	.password-confirm-ipt-box{
		width: 528rpx;
		height: 84rpx;
		background: #F6F6F6;
		border-radius:15rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		margin:30rpx auto;
	}
	.password-confirm-ipt{
		width: 450rpx;
		font-size: 28rpx;
		color: #555555;
	}
	.password-confirm-bottom{
		width: 100%;
		height: 90rpx;
		display: flex;
		border-top: 1rpx solid #cccccc;
		position: absolute;
		left:0;
		bottom: 0;
		>view{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 500;
		}
		>view:nth-child(1){
			color:#999999;
		}
		>view:nth-child(2){
			color:#FF6011;
			border-left: 1rpx solid #cccccc;
		}
	}
	.user-confirm-modal{
		width: 620rpx;
		min-height: 330rpx;
		padding:20rpx 0 64rpx 0;
		padding:20rpx 0 120rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.user-confirm-tips{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
		text-align: center;
	}
	.transfer-user-img{
		display: block;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin: 0 auto;
	}
	.user-confirm-content-text{
		text-align: center;
		font-size: 30rpx;
		margin-top: 30rpx;
		color: #999999;
		padding: 0 20rpx;
	}
	.user-confirm-content-text1{
		text-align: center;
		font-size: 28rpx;
		margin-top: 10rpx;
		color: #FF6011;
		padding: 0 20rpx;
	}
	.transfer_user_name{
		color: #333333;
		font-weight: 500;
		margin: 0 5rpx;
	}
	.transfer_amount{
		color: #333333;
		font-weight: 500;
		margin: 0 5rpx;
	}
</style>